﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
    <link rel="stylesheet" type="text/css" href="build/container/assets/skins/sam/container.css" />
    <link rel="stylesheet" type="text/css" href="build/button/assets/skins/sam/button.css" />
    <link rel="stylesheet" type="text/css" href="build/resize/assets/skins/sam/resize.css" />
    <script type="text/javascript" src="build/utilities/utilities.js"></script>
    <script type="text/javascript" src="build/container/container.js"></script>
    <script type="text/javascript" src="build/resize/resize.js"></script>


    <style type="text/css">
        #pushbutton1
        {
             border: 2px groove #ccc;    
        }
        #examplecontainer {
            padding:10px;
        }

        #resizablepanel .bd {
            overflow:auto;
            padding:10px;
            background-color:#fff;
        }

        #resizablepanel .ft 
        {
            height:25px;
            padding:3px 0px 0 10px;
        }

        #resizablepanel .yui-resize-handle-br {
            right:0;
            bottom:0;
            height: 8px;
            width: 8px;
            position:absolute;
        }
        #resizablepanel_c.hide-scrollbars .yui-resize .bd {
            overflow: hidden;
        }

        #resizablepanel_c.show-scrollbars .yui-resize .bd {
            overflow: auto;
        }
        #resizablepanel_c.show-scrollbars .underlay {
            overflow: visible;
        }
    </style>
    <script type="text/javascript">
        YAHOO.util.Event.onDOMReady(

        function () {
            var panel = new YAHOO.widget.Panel("resizablepanel", {
                draggable: true,
                fixedcenter: true,
                modal: true,
                visible: false,
                width: "500px",
                height: "350px",
                autofillheight: "body", 
                constraintoviewport: true,
                context: ["showbtn", "tl", "bl"]
            });
            panel.render();

            var resize = new YAHOO.util.Resize("resizablepanel", {
                handles: ["br"],
                autoRatio: false,
                minWidth: 300,
                minHeight: 100,
                status: false
            });
            resize.on("startResize", function (args) {

                if (this.cfg.getProperty("constraintoviewport")) {
                    var D = YAHOO.util.Dom;

                    var clientRegion = D.getClientRegion();
                    var elRegion = D.getRegion(this.element);

                    resize.set("maxWidth", clientRegion.right - elRegion.left - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
                    resize.set("maxHeight", clientRegion.bottom - elRegion.top - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
                } else {
                    resize.set("maxWidth", null);
                    resize.set("maxHeight", null);
                }

            }, panel, true);
            resize.on("resize", function (args) {
                var panelHeight = args.height;
                this.cfg.setProperty("height", panelHeight + "px");
            }, panel, true);

            YAHOO.util.Event.on("showbtn", "click", panel.show, panel, true);
        }
    );
    </script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
    
    <div id="examplecontainer">
        <button id="showbtn">Show Resizable Panel</button>
        <div id="resizablepanel">
            <div class="hd">Resizable Panel</div>
            <div class="bd">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nulla. Fusce mauris massa, rutrum eu, imperdiet ut, placerat at, nunc. Vestibulum consequat ligula ut lacus. Nulla nec pede. Fusce consequat, augue et eleifend ornare, nibh mi dapibus lorem, ut lacinia turpis eros at eros. Proin laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla velit. Fusce id sem sit amet felis porta mollis. Aliquam erat volutpat. Etiam tortor. Donec dui felis, pretium quis, vulputate et, molestie non, nisi.</p>
            </div>
            <div class="ft">
                <input type="button" value="Add" />
                <input type="button" value="Reset" />
            </div>
        </div>
    </div>

</body>
</html>
